day 2 Javascript網頁程式管理系統介紹

2024 iThome 鐵人賽

DAY 2

JavaScript

Javascript網頁程式管理系統系列第 2 篇

16th鐵人賽

neilsu02

2024-09-03 22:26:00

224 瀏覽

分享至

今天是第二天我們可以寫一個Javascript網頁程式管理系統介紹，以下是我的說明跟程式碼

介紹

這是一個基於JavaScript的簡單網頁管理系統。該系統提供一個用戶界面，用來管理項目列表。用戶可以新增、編輯、刪除項目，以及查看目前所有項目的列表。這個系統的核心技術包括HTML、CSS、JavaScript，以及瀏覽器本地儲存（Local Storage）來保存資料。

主要功能

建立項目：使用者可以透過表單新增新的項目。
查看項目：項目會顯示在一個列表中，使用者可以查看所有的項目。
更新項目：使用者可以編輯現有的項目資料。
刪除項目：使用者可以刪除不需要的項目。

範例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>簡單的項目管理系統</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        form {
            margin-bottom: 20px;
        }
        input, button {
            padding: 10px;
            margin: 5px 0;
            width: 100%;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            background-color: #f0f0f0;
            margin: 5px 0;
            padding: 10px;
            display: flex;
            justify-content: space-between;
        }
        .edit, .delete {
            margin-left: 10px;
            cursor: pointer;
            color: blue;
        }
    </style>
</head>
<body>
    <h1>項目管理系統</h1>

    <form id="itemForm">
        <input type="text" id="itemName" placeholder="輸入項目名稱" required>
        <button type="submit">新增項目</button>
    </form>

    <ul id="itemList"></ul>

    <script>
        // 儲存項目的陣列
        let items = JSON.parse(localStorage.getItem('items')) || [];

        // 更新項目列表
        function updateItemList() {
            const itemList = document.getElementById('itemList');
            itemList.innerHTML = '';
            items.forEach((item, index) => {
                const li = document.createElement('li');
                li.innerHTML = `
                    ${item} 
                    <span class="edit" onclick="editItem(${index})">編輯</span>
                    <span class="delete" onclick="deleteItem(${index})">刪除</span>
                `;
                itemList.appendChild(li);
            });
        }

        // 新增項目
        document.getElementById('itemForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const itemName = document.getElementById('itemName').value;
            items.push(itemName);
            localStorage.setItem('items', JSON.stringify(items));
            document.getElementById('itemName').value = '';
            updateItemList();
        });

        // 編輯項目
        function editItem(index) {
            const newItemName = prompt('編輯項目名稱', items[index]);
            if (newItemName) {
                items[index] = newItemName;
                localStorage.setItem('items', JSON.stringify(items));
                updateItemList();
            }
        }

        // 刪除項目
        function deleteItem(index) {
            items.splice(index, 1);
            localStorage.setItem('items', JSON.stringify(items));
            updateItemList();
        }

        // 初始化頁面
        updateItemList();
    </script>
</body>
</html>